<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>tab</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="jquery/jquery-2.1.4.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="nav nav-tabs" id="myTab">
      <li class="active"><a href="#home">Home</a></li>
      <li><a href="#profile">Profile</a></li>
      <li><a href="#messages">Messages</a></li>
      <li><a href="#settings">Settings</a></li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane active" id="home">home</div>
      <div class="tab-pane" id="profile">profile</div>
      <div class="tab-pane" id="messages">message</div>
      <div class="tab-pane" id="settings">settings</div>
    </div>

    <script>
      $(function () {
        $('#myTab a:last').tab('show');//初始化显示哪个tab

        $('#myTab a').click(function (e) {
          e.preventDefault();//阻止a链接的跳转行为
          $(this).tab('show');//显示当前选中的链接及关联的content
        })
      })
//    $('#myTab a[href="#profile"]').tab('show'); // Select tab by name
//    $('#myTab a:first').tab('show'); // Select first tab
//    $('#myTab a:last').tab('show'); // Select last tab
//    $('#myTab li:eq(2) a').tab('show');
//    a标签中无须再添加data-toggle='tab
    </script>
</body>
</html>